
<template>
  <div class="homebox">
    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
    <div class="handbox">
      <el-form :inline="true" :model="from" label-position="right">
        <el-row>
          <el-col :span="4.5">
            <el-form-item label="图源ID：" label-width="90px">
              <el-input
                v-model="from.symbolId"
                placeholder="请输入图源ID进行查询"
                clearable
                :style="{ width: $px2rem('240px') }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4.5">
            <el-form-item label="图源名称：" label-width="90px">
              <el-input
                v-model="from.imageRemark"
                placeholder="请输入图源名称进行查询"
                clearable
                :style="{ width: $px2rem('240px') }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col style="padding-left: 20px" :span="3">
            <el-button type="primary" icon="el-icon-search" @click="getQuery"
              >查询</el-button
            >
          </el-col>
          <el-col :span="8">
            <el-button type="primary" icon="el-icon-plus" @click="add"
              >新增图源</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="contentbox" v-loading="loading" v-if="imgList.length != 0">
      <div class="cardbox" v-for="(i, index) in imgList" :key="i.symbolId">
        <el-card shadow="hover">
          <p>图源ID:{{ i.symbolId }}</p>
          <p>类型:{{ i.deviceSubtype }}</p>
          <p>子类型:{{ i.deviceType }}</p>

          <img :src="handlemimg(i)" alt="" />
          <p>{{ i.imageRemark }}</p>
          <p class="hand">
            <span class="edit" @click="edit(i)">修改</span>
            <span class="delete" @click="handleClose(i)">删除</span>
          </p>
        </el-card>
      </div>
      <el-backtop target=".contentbox"></el-backtop>
      <Edit
        :dialogVisible="dialogVisible"
        @deter="deter"
        @cance="cance"
        :editList="editList"
      />
      <Add
        :dialogVisible="dialogVisibleadd"
        @deteradd="deteradd"
        @canceadd="canceadd"
      />
    </div>
    <div class="nodata" v-else>
      <el-empty description="暂无数据"></el-empty>
    </div>
  </div>
</template>
  
  <script>
// import HelloWorld from "@/components/HelloWorld.vue";
import Edit from "./components/edit.vue";
import Add from "./components/add.vue";
import { GetImageList, DeleteImageById } from "../../api/index";
export default {
  name: "HomeView",
  components: {
    Edit,
    Add,
  },
  data() {
    return {
      from: {
        imageRemark: "",
        symbolId: "",
      },
      timer: null,
      loading: true,
      dialogVisible: false,
      dialogVisibleadd: false,
      imgList: [],
      deleteid: {
        symbolId: "",
        id: "",
      },
      editList: {},
    };
  },
  inject: ["reload"],

  methods: {
    // inputchange(e) {
    //   if (this.timer) {
    //     clearTimeout(this.timer);
    //   }
    //   this.timer = setTimeout(() => {
    //     console.log(114, e);
    //     this.timer = null;
    //   }, 1000);
    // },
    handlemimg(e) {
      return (
        "http://192.168.8.100/mapbox/images" + e.imagePath + "?t=" + Date.now()
      );
    },
    add() {
      this.dialogVisibleadd = true;
    },
    deter(e) {
      this.dialogVisible = false;
      this.editList = {};
      this.getImgList();
    },
    deteradd() {
      this.dialogVisibleadd = false;
      this.getImgList();
    },
    cance(e) {
      this.dialogVisible = e;
      this.editList = {};
      this.getImgList();
      // this.reload(); //无感刷新
    },
    canceadd() {
      this.dialogVisibleadd = false;
    },
    edit(e) {
      console.log(878, e);
      this.editList = e;
      this.dialogVisible = true;
    },
    getQuery() {
      this.getImgList();
    },
    async getImgList() {
      try {
        let res = await GetImageList(this.from);
        this.imgList = res.results;
      } catch (err) {
      } finally {
        this.loading = false;
      }
    },
    handleClose(e) {
      console.log(85, e);
      this.deleteid.symbolId = e.symbolId;
      this.deleteid.id = e.id;
      this.$confirm("此操作将永久删除该图源, 是否继续?", "警告!", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          DeleteImageById(this.deleteid).then((res) => {
            console.log(99, res);
            this.$message({
              type: "success",
              message: `${res.message}`,
            });
            this.getImgList();
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
  },
  mounted() {
    console.log("刷新了");
    this.getImgList();
  },
};
</script>
  <style scoped lang='scss'>
.homebox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // border: 1px solid red;
  .handbox {
    width: 100%;
    height: 80px;
    padding: 20px 0px 0px 28px;
    box-sizing: border-box;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-around;
    // border: 1px solid red;
  }
  .contentbox {
    padding: 10px 10px 20px 10px;
    width: 100%;
    height: calc(100% - 80px);
    // border: 1px solid goldenrod;
    box-sizing: border-box;
    display: flex;
    align-content: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow-x: hidden;
    .cardbox {
      width: 186px;
      min-height: 260px;
      // border: 1px solid red;
      padding: 10px 10px 20px 10px;
      box-sizing: border-box;
      .el-card {
        background: linear-gradient(to bottom, #b3e0ff, #ccebff,);
        // background: rgba(255, 0, 0, 0.05);
        height: 100%;
        text-align: center;
        ::v-deep .el-card__body {
          padding: 0px 10px 0px 10px;
          // border: 1px solid red;
        }
        P {
          margin: 10px 0px 0px 0px;
          text-align: center;
          // border: 1px solid red;
        }
        img {
          margin-top: 10px;
          width: 80px;
          height: 80px;
          // border: 1px solid red;
          object-fit: cover;
        }
        .hand {
          margin-top: 10px;
          display: flex;
          justify-content: space-evenly;
          .edit {
            color: rgb(102, 177, 255);
            cursor: pointer;
            font-size: 15px;
            font-weight: 700;
          }
          .delete {
            color: rgb(247, 137, 137);
            cursor: pointer;
            font-size: 15px;
            font-weight: 700;
          }
        }
      }
    }
  }
  .nodata {
    padding: 260px 20px 20px 20px;
    width: 100%;
    height: calc(100% - 80px);
    // border: 1px solid red;
    box-sizing: border-box;
  }
  ::v-deep .el-row {
    // margin-top: 10px;
  }
  ::v-deep .el-col {
    height: 42px;
    // border: 1px solid gold;
  }
}
</style>
  